<template>
    <el-scrollbar height="100%" style="width: 100%;">

      <!-- 标题和搜索框 -->
      <div style="margin-top: 20px; margin-left: 40px; font-size: 2em; font-weight: bold;">
          个人主页
      </div>

      <el-form :model="userInfo" style="margin: 40px 40px 40px 20px;" label-width="120px">
        <!-- 用户ID -->
        <el-form-item label="用户ID">
          <el-input v-model="userInfo.user_id" readonly :disabled="true"></el-input>
        </el-form-item>

        <!-- 用户账号 -->
        <el-form-item label="用户账号">
          <el-input v-model="userInfo.account" readonly :disabled="true"></el-input>
        </el-form-item>

        <!-- 用户邮箱 -->
        <el-form-item label="用户邮箱">
          <el-input v-model="userInfo.user_email" readonly :disabled="true"></el-input>
        </el-form-item>

      </el-form>

    </el-scrollbar>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus'

export default {
    data() {
        return {
            userInfo: {
              user_id: -1,
              account: "",
              user_email: "",
            }
        }
    },
    methods: {
      getUserInfo() {
          axios.post("/user/info/",
              {
                user_id: sessionStorage.getItem('user_id'),
              })
              .then(response => {
                ElMessage.success("获取用户信息成功")
                // console.log(response)
                this.userInfo.user_id = response.data.user_id
                this.userInfo.account = response.data.account
                this.userInfo.user_email = response.data.user_email
              })
              .catch(error => {
                ElMessage.error("获取用户信息失败")
                console.log(error)
              })
      }
    },
    mounted() {
      this.getUserInfo()
    }
}
</script>